import React, { useEffect, useState } from 'react'
import axios from 'axios';
import { Link, useLocation, useNavigate } from 'react-router-dom';
export default function HeroShow() {
  //声明一个状态
  let [hero, setHero] = useState({});
  //获取 URL 中的路径参数  『获取 params 参数』
  // let {id} = useParams();
  //获取 URL 的查询字符串参数
  // let [search] = useSearchParams();
  // let id = search.get('hd');
  //获取 state 参数
  let res = useLocation();
  let id = res.state.id;

  //声明变量
  // let id = 28;
  //组件挂载完成
  useEffect(() => {
    let getData = async () => {
      //发送请求获取英雄的数据
      let hero = await axios.get(`http://api.xiaohigh.com/heros/${id}`);
      //更新英雄的状态
      setHero(hero.data);
    }
    getData();
  }, [id]);

  //获取 navigate 函数
  let navigate = useNavigate();

  return (
    <div className="container" style={{paddingTop:15}}>
      {/* 左侧结构 */}
      <div className="left col-xs-3" style={{background: '#efefef', paddingTop: 20}}>
        <button className='btn btn-primary' onClick={() => {
          //历史的后退
          navigate(-1);
        }}>后退</button>
        <Link to="/hero" state={{id: 1}}>云樱</Link>
        <h2>{hero.name}</h2>
        <p>{hero.type}</p>
        <div className="row">
          {
            hero.skills && hero.skills.map((item, index) => {
              return <div className="col-xs-3" key={index}>
                  <img className='img-responsive' src={`http://cdn.xiaohigh.com${item.img}`} alt="" />
                  <p>{item.name}</p>
                </div>
            })
          }
        </div>
      </div>
      {/* 右侧结构 */}
      <div className="left col-xs-9">
        {/* 大图 */}
        <img width="100%" src={hero.big_image ? `http://cdn.xiaohigh.com${hero.big_image}` : ''} alt="" />
        <hr />
        <p dangerouslySetInnerHTML={{__html: hero.intro}}>
          {/* {hero.intro} */}
        </p>
      </div>
    </div>
  )
}
